<!DOCTYPE html>
<html>
<head>
    <title>我的签到</title>
    <meta charset="utf-8"/>
    <!--开启响应式布局-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userTravels.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>

    <!--签到插件样式1,未使用-->
    <link rel="stylesheet" href="/js/plugins/plugIn/css/style.css">
    <script src="/js/plugins/plugIn/js/main.js"></script>

    <!--签到插件样式2-->
    <script src="/js/plugins/dcalendar/js/dcalendar.picker.js"></script>
    <link rel="stylesheet" href="/js/plugins/dcalendar/css/dcalendar.picker.css">
    <style>
        .mydiv{
                 margin:0 auto;
                 width:300px;
                 /*height:200px;*/
             }
    </style>
    <script>
        $(function () {

            /*我的日期插件*/
            $('#mycalendar').dcalendar(); //初始化日历
            //判断是否已登录
            $.get(baseUrl+"/signIns/"+user.id,function (data) {
                //$("#singIn1").removeAttr("disabled");
                //
                if(data){
                    $("#singIn1").val("今日已签到");
                    //$("#singIn1").attr("disabled","disabled");
                    $("#signin2").renderValues(data,{
                        getHref:getHref

                    });

                    console.log(data);
                }else {
                    $("#singIn1").val("签到有积分");
                    $("#singin3").remove();
                }

            });
            //点击签到按钮
            $("#singIn1").click(function () {

                    if($("#singIn1").val()=="今日已签到"){
                        $(document).dialog({
                            titleText: '温馨提示',
                            content: '亲,今日已签到!',

                        });
                        /*setTimeout(function () {
                            window.location.href="/mine/signIn.html";

                        },2000)*/
                    }else {
                        $.post(baseUrl+"/signIns/"+user.id,function (data) {
                        //$("#singIn1").removeAttr("disabled");
                        $("#signin2").renderValues(data,{
                            getHref:getHref

                        });
                        $(document).dialog({
                            titleText: '温馨提示',
                            content: '签到成功!',
                        });
                        setTimeout(function () {
                            window.location.href="/mine/signIn.html";

                        },2000)
                        console.log("签到后的数据"+data);
                        });
                    }




            });
            //获取当月的所有签到时间,并将其背景变为黄色
            $.get(baseUrl+"/signInHistorys/"+user.id+"/days",function (data) {
                $.each(data,function (index, ele) {
                    light(ele);
                })
            })
            //获取当月所有日期的span元素
            var spans=$(".date span");
            console.log(spans);
            //给当月的被选中日期进行日历的选中样式切换
            function light(day) {
                console.log("高亮显示");
                $.each(spans,function (index, ele) {
                    if(ele.innerHTML==day){
                        $(ele).css({"background-color":"yellow","font-size":"150%"});
                    }
                })
            }


            //给日历中的月份绑定值改变事件
            $("#currM").change(function () {
                month=$("#currM").html();
                    console.log("5月");
                /*if(month=="May 2019"){
                    //如果日期为5月份,回显5月日历签到情况
                    $.get(baseUrl+"/signInHistorys/"+user.id+"/days",{month:"2019-05"},function (data) {
                        $.each(data,function (index, ele) {
                            light(ele);
                        })
                    })
                }*/
            });
            //点击上一个月按钮
            $("#prev").click(
                function () {
                        $.get(baseUrl+"/signInHistorys/"+user.id+"/days",{month:"2019-05"},function (data) {
                            //获取当月所有日期的span元素
                            var spans=$(".date span");
                            console.log("11111"+spans);
                            //给当月的被选中日期进行日历的选中样式切换
                            function light(day) {
                                console.log("高亮显示");
                                $.each(spans,function (index, ele) {
                                    if(ele.innerHTML==day){
                                        $(ele).css({"background-color":"yellow","font-size":"150%"});
                                    }
                                })
                            }

                            $.each(data,function (index, ele) {
                                light(ele);
                                console.log(ele);
                            })
                        })
                }
            );
            /*$("#next").click(function () {
                console.log("回退");
                window.location.href="/mine/signIn.html";
            })*/

            //$("#currM").change();

            /*$("#prev").click(function () {

            console.log(month);
            });*/

        })
    </script>

</head>

<body style="background-color:lightpink">
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="profiles.html">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的签到</span>
        </div>
        <div class="col"></div>
    </div>

</div><br>




<div id="signin2" class="mydiv">

    <input type="button" id="singIn1" style="color: red"  accept="middle"><br>
    <div id="singin3">
        连续签到:<span id="conDays" render-html="condays"></span>天<br>
        一共签到:<span id="totalDays" render-html="totalDays"></span>天&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a render-key="id" render-fun="getHref"  data-url="/mine/lotto/turntable.html?id=" style="color: deeppink;text-decoration:underline;">点击抽奖</a><br>


        剩余积分:<span id="integral" render-html="integral"></span>分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a render-key="id" render-fun="getHref"  data-url="/mine/signInHistory.html?id=" style="color: deeppink;text-decoration:underline;">点击查看签到历史</a>

    </div>
<div class="mydiv"><br>
    <!--日期插件input-->
    <input id='mydatepicker'  type="hidden"/>

    <table id='mycalendar' class='calendar' align="center"></table>
</div>

<hr>
<div class="mydiv">
    <textarea rows="4" cols="40" ReadOnly="true">
           温馨提示:
           签到规则:每天签到奖励100积分,连续签到7天以上,每天奖励200积分,中途出现断签,累计签到天数从1开始!!!
    </textarea>
</div>
</div>
</body>
</html>
